<template>
  <div class="box">
    <div class="center">
      <div class="form">
        <div class="item">
          <p>登录</p>
          <span>
            <router-link to="/myregister">新用户注册</router-link>
          </span>
        </div>
        <hr width="100%" color="black" />
        <div class="item">
          <label> 用户名: </label>
          <input
            v-on:input="utest"
            v-model="username"
            class="user xyz"
            type="text"
            placeholder="请输入用户名"
          />
        </div>
        <span>{{ umsg }}</span>
        <div class="item">
          <label> 密码: </label>
          <input
            v-on:input="ptest"
            v-model="password"
            class="pwd xyz"
            type="password"
            placeholder="请输入密码"
          />
        </div>
        <span>{{ pmsg }}</span>
        <div class="item ls">
          <div>
            <input type="checkbox" />
            <span>自动登录</span>
          </div>
          <span>忘记密码?</span>
        </div>
        <div class="item">
          <button @click="test">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapMutations } from "vuex";
export default {
  data() {
    return {
      data: "",
      umsg: "",
      pmsg: "",
      username: "",
      password: "",
    };
  },
  methods: {
    // ...mapMutations(["changeLogin"]),
    utest: function () {
      var ut = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
      );
      if (this.username == "") {
        this.umsg = "用户名不能为空!";
      } else if (this.username.length < 3 || this.username.length > 12) {
        this.umsg = "用户名为3-5个字符!";
      } else if (ut.test(this.username)) {
        this.umsg = "用户名不能含有特殊字符!";
      } else {
        this.umsg = "";
      }
    },
    ptest: function () {
      var pt = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$");
      if (this.password == "") {
        this.pmsg = "密码不能为空!";
      } else if (!pt.test(this.password)) {
        this.pmsg = "密码必须为12位字母、数字的组合";
      } else {
        this.pmsg = "";
      }
    },
    test: function () {
      const { username, password } = this; //对象解构
      console.log(username, password);
      //POST请求, 特点是 路径 与 参数分开
      const url = "/login";
      const params = `name=${username}&password=${password}`;
      console.log(url, params);
      this.axios.post(url, params).then((res) => {
        console.log(res); // 结果不是200的, 肯定是 params抄错了, 自己查
        if (res.data.code == 200) {
          alert("恭喜! 登录成功");
          localStorage.setItem("token", {
            name: this.username,
            password: this.password,
          });
          this.$router.push("/");
          console.log(this.$router);
        } else {
          alert("糟糕! 登录失败, 小马哥为你点赞哦");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}

.box {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  background-image: url("../assets/IMG/bg/book21920x1080.png");
  display: flex;
  align-items: center;
  justify-content: center;
  .center {
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);

    .form {
      width: 300px;
      display: flex;
      flex-direction: column;
      > span {
        width: 100%;
        height: 15px;
        line-height: 15px;
        text-align: center;
        margin: auto 0;
        color: red;
        font-size: 10px;
      }
      .ls {
        div {
          display: flex;
          justify-content: center;
        }
        span {
          font-size: 12px;
          color: white;
        }
      }
      .item {
        width: 100%;
        height: 50px;
        display: flex;
        // display: inline-block;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 25px;
          font-weight: 400;
          color: white;
        }
        span > a {
          font-size: 15px;
          text-decoration: none;
          color: white;
        }
        label {
          width: 25%;
          font-size: 18px;
          text-align: center;
        }
        input:last-child {
          width: 75%;
          height: 25px;
          outline: none;
          // text-align: center;
          padding: 5px 10px;
          border-radius: 5px;
        }
      }
      .item:last-child {
        display: flex;
        justify-content: center;
        button {
          width: 100%;
          height: 40px;
          border-radius: 5px;

          background-color: rgba(39, 176, 246, 0.8);
        }
      }
    }
  }
}
</style>
